<script setup>
import {ref, onMounted} from "vue";
import {LoginApi} from "@/apis/user";
import {sendLoginSms} from "@/apis/sms"
import {useUserStore} from "@/stores/user";
import FooterView from "../components/FooterView.vue";
import {useRouter} from "vue-router";
import {Message} from "tdesign-mobile-vue";

const formData = ref({
  user: '',
  password: '',
  phone: '',
  code: '',
  type: 'h5'
})
let timer = null;
let time = 0;
const loading = ref(false);
const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
const store = useUserStore();
const router = useRouter();
const smsBtn = ref({content: "发送验证码", disable: false})

onMounted(() => {
  if (localStorage.getItem("token")) {
    router.replace({
      name: 'home'
    })
  }
})

function sendLoginSmsFunc() {
  if (formData.value.phone == "") {
    Message.error({
      content: "手机号不能为空",
      context: document.querySelector('main'),
      offset: [8, 8]
    })
    return;
  }
  if (time <= 0) {
    sendLoginSms(formData.value.phone)
        .then(res => {
          const {code, msg} = res.data;
          if (code === 1) {
            Message.success({
              content: msg,
              context: document.querySelector('main'),
              offset: [8, 8]
            })
            time = 180;
            timer = setInterval(() => {
              if (time > 0) {
                time--;
                smsBtn.value = {content: time + "秒", disable: true}
              } else {
                clearInterval(timer);
                time = 0;
                smsBtn.value = {content: "发送验证码", disable: false}
              }
            }, 1000)
          } else {
            Message.error({
              content: msg,
              context: document.querySelector('main'),
              offset: [8, 8]
            })
          }
        })
  } else {
    Message.error({
      content: "请稍后尝试",
      context: document.querySelector('main'),
      offset: [8, 8]
    })
  }
}

function LoginFunc() {
  loading.value = true
  LoginApi(formData.value)
      .then(res => {
        const {code, msg, data} = res.data;
        if (code === 1) {
          store.userLogin(data.userInfo, data.token);
          router.replace({
            name: 'home'
          })
        } else {
          Message.error({
            content: msg,
            context: document.querySelector("main"),
            offset: [8, 8]
          });
        }
      })
      .finally(() => {
        loading.value = false;
      })
}
</script>
<template>
  <main>
    <t-image :src="imageSrc" style="width: 100%;height:200px;"></t-image>

    <t-cell-group title="广西城市职业大学数控制造协会欢迎你" theme="card"></t-cell-group>

    <t-tabs v-model="formData.type">
      <t-tab-panel value="h5" label="账号登录"/>
      <t-tab-panel value="phone" label="手机登录"/>
    </t-tabs>

    <t-form
        @submit="LoginFunc"
    >
      <div v-if="formData.type==='h5'">
        <t-form-item label="用户名" name="name">
          <t-input v-model="formData.user" borderless placeholder="请输入账号"></t-input>
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input v-model="formData.password" borderless type="password" :clearable="false" placeholder="请输入密码">
            <template #suffixIcon>
              <BrowseOffIcon/>
            </template>
          </t-input>
        </t-form-item>
      </div>

      <div v-else>
        <t-form-item label="手机号" name="phone">
          <t-input v-model="formData.phone" borderless placeholder="请输入手机号"></t-input>
        </t-form-item>
        <t-form-item label="验证码" name="code">
          <t-input v-model="formData.code" borderless placeholder="请输入验证码">
            <template #suffix>
              <t-button theme="primary" @click="sendLoginSmsFunc" :disabled="smsBtn.disable" size="extra-small"> {{
                  smsBtn.content
                }}
              </t-button>
            </template>
          </t-input>
        </t-form-item>
      </div>


      <div style="padding: 6px;">
        <t-button block theme="primary" type="submit">登录</t-button>
      </div>
    </t-form>
  </main>
  <footer-view></footer-view>
</template>
<style scoped lang="less">

.suffix {
  display: flex;
  align-items: center;
}

.suffix--line {
  width: 1px;
  height: 24px;
  background-color: #f6f6f6;
  margin-right: 16px;
}

.image {
  width: 72px;
  height: 36px;
  display: block;
  margin-top: -6px;
  margin-bottom: -6px;
}
</style>